<template>
	<view class="body" id="screenshot-target">
		<view class="background">
			<u-navbar :title-bold="true" :border-bottom="false" custom-class="home-bg" :background="{ background: 'transparent' }"></u-navbar>

			<view class="bottom-code">
				<view class="code-bottom-name">
					<view class="left-code"></view>
					<view>我的邀请码</view>
					<view class="right-code"></view>
				</view>
				<view class="code">{{ user.invitationCode }}</view>
				<view class="QRcode">
					<ayQrcode ref="qrcode" :modal="modal_qr" :url="url" @hideQrcode="hideQrcode" :height="160" :width="160" />
				</view>
			</view>

			<view class="buttom-btn" @click="save()">
				<view class="buttom-image">保存到相册</view>
			</view>
		</view>
	</view>
</template>

<script>
import ayQrcode from '@/components/ay-qrcode/ay-qrcode.vue';
import api from '@/api/index.js';
import html2canvas from 'html2canvas';
export default {
	components: {
		ayQrcode
	},
	data() {
		return {
			user: {},
			//二维码相关参数
			modal_qr: false,
			url: 'https://axyx.dpdzsw.com/pages/login/login?code=', // 要生成的二维码值
			// url: 'http://192.168.1.110:8080/pages/login/login?code=', // 要生成的二维码值
			path: api.getPathApi()
		};
	},
	onLoad() {
		this.showQrcode();
		this.user = uni.getStorageSync('user');
		// this.url = this.path + ""
		this.url = this.url + this.user.invitationCode;
	},
	methods: {
		// 展示二维码
		showQrcode() {
			let _this = this;
			this.modal_qr = true;
			// uni.showLoading()
			setTimeout(function () {
				// uni.hideLoading()
				_this.$refs.qrcode.crtQrCode();
			}, 50);
		},

		//传入组件的方法
		hideQrcode() {
			this.modal_qr = false;
		},
		async save() {
			// #ifdef H5
			try {
				const element = document.getElementById('screenshot-target');

				// 配置选项（根据需求调整）
				const options = {
					useCORS: true, // 允许跨域图片
					scale: 2, // 提高截图清晰度
					backgroundColor: '#FFFFFF' // 背景色
				};

				// 执行截图
				const canvas = await html2canvas(element, options);

				// 转换为 DataURL
				const imgData = canvas.toDataURL('image/png');

				// 预览图片
				this.previewImage = imgData;

				// 保存到相册（H5 端可能受限，通常需用户手动保存）
				this.saveImage(imgData);
			} catch (err) {
				console.error('截图失败:', err);
				uni.showToast({ title: '截图失败', icon: 'none' });
			}
			// #endif

			// 其他端处理（如小程序）
			// #ifdef MP-WEIXIN
			uni.pageCapture({
				success: (res) => {
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success: () => {
							uni.showToast({ title: '截图成功' });
						}
					});
				}
			});
			// #endif
		},
		// H5 端保存图片（兼容方案）
		saveImage(dataUrl) {
			// 方案1: 创建下载链接
			const link = document.createElement('a');
			link.download = 'screenshot.png';
			link.href = dataUrl;
			link.click();
		}
	}
};
</script>

<style lang="scss" scoped>
.body {
	background-color: #fb4436;
	height: 100vh;
	// height: 844px;
	width: 100%;
	overflow: hidden;
	.background {
		height: 100%;
		width: 100%;
		background: url('@/static/user/code1.png') no-repeat;
		background-size: 100% 94%;
	}
	.bottom-code {
		position: absolute;
		bottom: 10%;
		left: 45%;
		transform: translate(-40%);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.code-bottom-name {
			margin: 20rpx 0;
			width: 100%;
			font-weight: bold;
			font-size: 40rpx;
			color: #893337;

			display: flex;
			align-items: center;
			justify-content: center;
			.left-code {
				width: 84rpx;
				height: 8rpx;
				background: linear-gradient(270deg, #f05a39 0%, rgba(255, 255, 255, 0.57) 100%);
				margin-right: 10rpx;
			}
			.right-code {
				width: 84rpx;
				height: 8rpx;
				background: linear-gradient(90deg, #f05a39 0%, rgba(255, 255, 255, 0.57) 100%);
				margin-left: 10rpx;
			}
		}

		.code {
			font-weight: 500;
			font-size: 42rpx;
			color: #893337;
			margin-bottom: 20rpx;
		}
	}
}

.buttom-btn {
	position: absolute;
	bottom: 1%;
	z-index: 1000;
	left: 45%;
	transform: translate(-40%);
	.buttom-image {
		width: 366rpx;
		height: 65.37rpx;
		background: url('@/static/user/code2.png');
		background-size: 366rpx 65.37rpx;

		display: flex;
		justify-content: center;
		padding-top: 6rpx;
		font-weight: 600;
		font-size: 30rpx;
		color: #ffffff;
	}
}

.QRcode {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20rpx;
	// margin-left: 20rpx;
}
</style>
